$(function () {


    // ********************************************************加载列表
    // ********************************************************加载列表
    function list() {
        $.ajax({

            url: '/admin/links',
            success: function (res) {
                $('tbody').html('')

                res.data.forEach(item => {


                    $('tbody').append(`
            <tr>
                    <td>${item.id}</td>
                    <td>
                        <div class="bg">
                            <img src="http://localhost:8888/uploads/${item.linkicon}">
                        </div>
                    </td>
                    <td>${item.linkname}</td>
                    <td>${item.linkurl}</td>
                    <td>这是${item.linkdesc}的友情链接</td>
                    <td>
                        <button type="button" class="layui-btn layui-btn-xs edit" index=${item.id}>
                            编辑
                        </button>
                        <button type="button" class="layui-btn layui-btn-xs layui-btn-danger delete" index=${item.id}>
                            删除
                        </button>
                    </td>
             </tr>
            `)


                });
            }
        })
    }
    list()



    // *********************************************************删除友情链接


    // **********************************************************编辑友情链接
    let edit_str = `<form id="edit-form" lay-filter='editForm' class="layui-form" style="margin: 15px 30px 0 0">
      <!-- 第一行：密码 -->
      <div class="layui-form-item">
        <label class="layui-form-label">链接名称</label>
        <div class="layui-input-block">
          <input type="text" name="linkname" required lay-verify="required" placeholder="请输入链接名称" autocomplete="off" class="layui-input" >
        </div>
      </div>
      <!-- 第二行：确认密码 -->
      <div class="layui-form-item">
        <label class="layui-form-label">链接地址</label>
        <div class="layui-input-block">
          <input type="text" name="linkurl" required lay-verify="required" placeholder="请输入链接地址" autocomplete="off" class="layui-input" >
        </div>
      </div>
      <!-- 第三行：链接描述 -->
      <div class="layui-form-item">
        <label class="layui-form-label">链接描述</label>
        <div class="layui-input-block">
          <input type="text" name="linkdesc" required lay-verify="required" placeholder="请输入链接描述" autocomplete="off" class="layui-input"  >
        </div>
      </div>
      <!-- 第四行：上传图片 -->
      <div class="layui-form-item">
        <div class="layui-input-block icon-url">
          <button type="button" class="layui-btn layui-btn-sm" id="urlIcon">
            <i class="layui-icon">&#xe67c;</i>上传图片
          </button>
          <input type="file" id="linkFile" style="display: none;">
          <img id="preIcon" src="">
        </div>
      </div>
      <!-- 第三行：按钮 -->
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>`;

    // *********************************************************添加友情链接
    let add_str = `
  <form id="add-form" class="layui-form" style="margin: 15px 30px 0 0">
      <!-- 第一行：密码 -->
      <div class="layui-form-item">
        <label class="layui-form-label">链接名称</label>
        <div class="layui-input-block">
          <input type="text" name="linkname" required lay-verify="required" placeholder="请输入链接名称" autocomplete="off" class="layui-input">
        </div>
      </div>
      <!-- 第二行：确认密码 -->
      <div class="layui-form-item">
        <label class="layui-form-label">链接地址</label>
        <div class="layui-input-block">
          <input type="text" name="linkurl" required lay-verify="required" placeholder="请输入链接地址" autocomplete="off" class="layui-input">
        </div>
      </div>
      <!-- 第三行：链接描述 -->
      <div class="layui-form-item">
        <label class="layui-form-label">链接描述</label>
        <div class="layui-input-block">
          <input type="text" name="linkdesc" required lay-verify="required" placeholder="请输入链接描述" autocomplete="off" class="layui-input">
        </div>
      </div>
      <!-- 第四行：上传图片 -->
      <div class="layui-form-item">
        <div class="layui-input-block icon-url">
          <button type="button" class="layui-btn layui-btn-sm" id="urlIcon">
            <i class="layui-icon">&#xe67c;</i>上传图片
          </button>
          <input type="file" name="linkicon" id="linkFile" style="display: none;">
          <img id="preIcon" src="">
        </div>
      </div>
      <!-- 第三行：按钮 -->
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>`

    let laypage;
    let form;
    let layer;
    layui.use('laypage', function () {
        laypage = layui.laypage;
        form = layui.form;
        layer = layui.layer;
        // 添加
        $('#add-link').on('click', function () {

            let index = layer.open({
                title: '添加链接',
                content: add_str,
            });

            $('#urlIcon').on('click', function () {
                $('#linkFile').click()
            })
            let obj;
            $("#linkFile").on("change", function () {

                // 1.拿到图片信息
                obj = this.files[0];
                // 2.需要把图片对象 转换为  临时图片地址
                let src = URL.createObjectURL(obj);
                $('#preIcon').attr('src', src)
            });
            $('#add-form').on('submit', function (e) {
                e.preventDefault()
                let fd = new FormData(this)
                fd.set('linkicon', obj)
                $.ajax({
                    url: '/admin/links',
                    type: 'post',
                    data: fd,
                    processData: false, //不转换
                    contentType: false, //不编码
                    success: function (res) {
                        layer.close(index)
                        layer.msg(res.message)
                        list()
                    }



                })
            })









        })

        // 删除
        $('tbody').on('click', '.delete', function () {

            let id = $(this).attr('index')
            $.ajax({
                url: `/admin/links/${id}`,
                type: `DELETE`,
                success: function (res) {
                    layer.msg(res.message)
                    list()

                }
            })
        })


        // 编辑
        $('tbody').on('click', '.edit', function () {

            let id = $(this).attr('index')
            let index = layer.open({
                title: '添加链接',
                content: edit_str,
            });
            $.ajax({
                url: `/admin/links/${id}`,
                type: `GET`,
                success: function (res) {
                    form.val("editForm", res.data);
                }
            })

            $('#urlIcon').on('click', function () {
                $('#linkFile').click()
            })
            let obj;
            $("#linkFile").on("change", function () {

                // 1.拿到图片信息
                obj = this.files[0];
                // 2.需要把图片对象 转换为  临时图片地址
                let src = URL.createObjectURL(obj);

                $('#preIcon').attr('src', src)
            });

            $('#edit-form').on('submit', function (e) {
                e.preventDefault()
                let fd = new FormData(this)
                fd.set('linkicon', obj)
                $.ajax({
                    url: `/admin/links/${id}`,
                    type: `PUT`,
                    data: fd,
                    processData: false, //不转换
                    contentType: false, //不编码
                    success: function (res) {
                        layer.close(index)
                        layer.msg(res.message)
                        list()
                    }
                })
            })



















        })






















    })

})